<template>
  <div class="box homeBox">
    <header>
      <van-nav-bar>
        <template #left>
          <van-icon name="apps-o" size="18" />
        </template>
        <template #right>
          <van-icon name="contact" size="18" />
        </template>
        <template #title>
          <van-search
            v-model="value"
            shape="round"
            :disabled="true"
            @click="$router.push('/search/'+value)"
          />
        </template>
      </van-nav-bar>
    </header>
    <main ref="main" @scroll="onScroll">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.bannerId">
          <van-image
            width="100vw"
            :src="item.src"
            :title="item.name"
            :alt="item.title"
          />
        </van-swipe-item>
      </van-swipe>
      <div class="cont">
        <van-grid :column-num="5">
          <van-grid-item v-for="item in kindList" :key="item.id" :icon="item.icon" :text="item.title"/>
        </van-grid>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <!-- <router-link
              v-for="item in proList"
              :key="item.proId"
              :to="'/detail?id='+item.proId"
            > -->
            <!-- <router-link
              v-for="item in proList"
              :key="item.proId"
              :to="{name:'abc', query:{id: item.proId}}"
            > -->
            <!-- <router-link
              v-for="item in proList"
              :key="item.proId"
              :to="'/detail/'+item.proId"
            > -->
            <router-link
              v-for="item in proList"
              :key="item.proId"
              :to="{name:'abc', params:{id: item.proId}}"
            >
              <van-card
                :num="item.sales"
                :price="item.price"
                :title="item.proName"
                :thumb="item.img"
              />
            </router-link>
          </van-list>
        </van-pull-refresh>
      </div>
    </main>
    <van-icon name="back-top" class="my-back-top" @click="goToTop" ref="toTop"/>
  </div>
</template>

<script>
import Vue from 'vue'
import { getBanner, getKind, getPage } from '@/api/request.js'
import { Button, Swipe, SwipeItem, Image as VanImage, Grid, GridItem, PullRefresh, List, Card, Icon, NavBar, Search } from 'vant'

Vue.use(Button)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(PullRefresh)
Vue.use(List)
Vue.use(Card)
Vue.use(Icon)
Vue.use(NavBar)
Vue.use(Search)

export default {
  data () {
    return {
      bannerList: [],
      kindList: [],
      iconList: [
        'chat-o', 'fire-o', 'chat-o', 'fire-o', 'chat-o', 'fire-o', 'chat-o', 'fire-o', 'chat-o', 'fire-o'
      ],
      proList: [],
      loading: false,
      finished: false,
      index: 0,
      isLoading: false,
      num: 10,
      value: '手机'
    }
  },
  mounted () {
    getBanner().then(data => {
      this.bannerList = data.data.msg
    })
    getKind().then(data => {
      data.data.msg.forEach((val, idx) => {
        this.kindList.push({
          title: val,
          icon: this.iconList[idx],
          id: idx
        })
      })
      this.kindList.length = 10
    })
  },
  methods: {
    onLoad () {
      // 列表滚动到底部执行
      // 根据文档要求,将loading设置为true,表示正在加载状态
      this.loading = true
      // 真实的加载数据
      getPage({
        num: this.num,
        index: this.index++
      }).then(data => {
        // 加载成功后,将loading设置为false,表示加载结束
        this.loading = false
        // 拼接上一页数据
        // this.proList = this.proList.concat(data.data.msg)
        this.proList = [...this.proList, ...data.data.msg]
        // 判断数据是否加载完毕
        if (data.data.msg.length < 1) {
          // 将finished设置为true,表示所有数据加载完毕
          this.finished = true
        }
      })
    },
    onRefresh () {
      this.$router.go(0)
      // 下拉刷新
      // 重新请求首页数据
      getPage({
        num: this.num,
        index: 0
      }).then(data => {
        // 请求成功后,覆盖要渲染的数据
        this.proList = data.data.msg
        // 将isLoading设置为false,表示刷新结束
        this.isLoading = false
        // 将页码初始化,设置为0
        this.index = 0
        this.finished = false
      })
    },
    onScroll () {
      // 找到滚动的元素,绑定滚动事件，判断滚动距离，显示或隐藏回到顶部按钮
      if (this.$refs.main.scrollTop > 300) {
        this.$refs.toTop.style.display = 'block'
      } else {
        this.$refs.toTop.style.display = 'none'
      }
    },
    goToTop () {
      // 点击回到顶部按钮,设置可滚动元素的滚动距离为0
      this.$refs.main.scrollTop = 0
    }
  }
}
</script>

<style lang="scss">
.homeBox{
  display: flex;
  flex-direction: column;
  overflow: auto;
  header{
    background: #efefef;
    .van-nav-bar__content{
      height: 0.54rem;
      i{
        color: #000;
      }
      .van-nav-bar__title{
        width: 80%;
        max-width: 80%;
      }
    }
  }
  main{
    flex: 1;
    overflow: auto;
    .cont{
      height: 10rem;
    }
  }
  .my-back-top{
    position: fixed;
    bottom: 1rem; right: 0.2rem;
    background: #afafaf;
    color: #fefefe;
    padding: 0.1rem;
    border-radius: 0.06rem;
    font-size: 0.3rem;
    display: none;
  }
}
</style>
